<template>
  <div class="out">
    <div class="out1">
      <span class="title">添加歌曲</span>
      <div class="ablock">
        <span
          style="
            color: gray;
            font-size: 12px;
            padding: 0px 10px 0;
            display: block;
            margin: 5px 0px;
          "
          >搜索歌曲：
        </span>
        <el-input
          v-model="songName"
          placeholder="热门推荐"
          class="txtInput"
          suffix-icon="el-icon-search"
          >></el-input
        >
        <span
          style="
            color: gray;
            font-size: 12px;
            padding: 0px 10px 0;
            display: block;
            margin: 5px 0px;
          "
          >设置时间：
        </span>
        <el-input
          v-model="setTime"
          placeholder="设置时间"
          class="txtInput"
          suffix-icon="el-icon-time"
          >></el-input
        >
        <el-button
          type="primary"
          @click="handleAdd"
          prefix-icon="el-icon-user-solid"
          >添 加</el-button
        >
      </div>
      <el-dialog
        title="提 示"
        :visible.sync="dialogVisible"
        width="30%"
        top="15%"
        :before-close="handleClose"
      >
        <span>提示内容</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="out1">
      <span class="title">歌单</span>
      <div class="ablock">
        <el-table :data="songList">
          <el-table-column
            prop="songName"
            label="歌名"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="songDspt"
            label="歌曲描述"
            width="200"
          ></el-table-column>
          <el-table-column
            prop="songTime"
            label="预定播放时间"
            width="200"
          ></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="out1">
      <span class="title">新闻播报设置</span>
      <div class="ablock">
        <span
          style="
            color: gray;
            font-size: 12px;
            padding: 0px 10px 0;
            display: block;
            margin: 5px 0px;
          "
          >设置时间：
        </span>
        <el-input
          v-model="NewsTime"
          placeholder="设置时间"
          class="txtInput"
          suffix-icon="el-icon-time"
          >></el-input
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 音乐新闻
  name: "MusicNews",
  data() {
    return {
      dialogVisible: false,
      songName: "",
      songList: [],
      setTime: "",
      NewsTime: "17:00",
      value: 60,
    };
  },
  created: function () {
    this.init();
  },
  methods: {
    init() {
      this.songList = [
        {
          songName: "test",
          songDspt: "testDesciption",
          songTime: "testTime",
        },
        {
          songName: "test2",
          songDspt: "testDesciption2",
          songTime: "testTime",
        },
        {
          songName: "test3",
          songDspt: "testDesciption3",
          songTime: "testTime",
        },
      ];
    },
    handleAdd() {
      this.dialogVisible = true;
    },
  },
};
</script>

<style>
.out {
      margin: 30px 90px;
      width: 100%;
  }
  .out1 {
      /* margin: 0 0 10px; */
      width: 85%;
  }
.title {
  margin: 15px 0;
  padding-left: 12px;
  line-height: 30px;
  display: block;
  color: gray;
}
.txtInput {
  margin: 10px 0 20px 0;
}
.ablock {
  padding: 14px 30px;
  background: whitesmoke;
  border-radius: 10px;
}
.say {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: none;
  margin: 5px 0px 0px 0px;
  /* background-image: url('../assets/image/say.png'); */
}
.textSay {
  display: inline-block;
  vertical-align: top;
  height: 100%;
  margin: 10px 30px;
  color: gray;
  user-select: none;
}
.bblock {
  padding: 14px 30px;
  background: whitesmoke;
  border-radius: 10px;
  align-items: center;
}
</style>